<template>
  <t-dialog
    v-model:visible="visible"
    :close-on-overlay-click="false"
    header="绑定邮箱"
    :footer="null"
    width="420"
    :close-btn="false"
    @close="close"
  >
    <t-form ref="formRef" :data="formData" label-align="top" :label-width="100" @submit="onSubmitConfirm">
      <t-form-item
        name="email"
        label="邮箱"
        :rules="[
            { required: true, message: `邮箱不能为空`, type: 'error' },
            { email: true, message: '邮箱地址输入不正确', type: 'warning' },
          ]"
      >
        <t-input v-model="formData.email" placeholder="请输入邮箱地址" />
      </t-form-item>
      <t-form-item name="code" label="验证码" :rules="[{ required: true, message: `验证码不能为空`, type: 'error' }]">
        <t-input v-model="formData.code" placeholder="请输入验证码" />
        <t-button theme="primary" variant="base" :disabled="countDown > 0" @click="sendCode">
          {{
            countDown == 0 ? $t('pages.signup.sendVerification') : $t('pages.signup.waitVerification', { countDown })
          }}
        </t-button>
      </t-form-item>
      <t-form-item class="pt-[20px]">
        <t-button type="submit">确认邮箱</t-button>
        <t-button theme="default" type="button" @click="cancel">取消</t-button>
      </t-form-item>
    </t-form>
  </t-dialog>
</template>
<script setup lang="ts">
import { useCounter } from '@/hooks';
import { ref, watch } from 'vue';
import { FormInstanceFunctions, MessagePlugin } from 'tdesign-vue-next';
import { commEmail } from '@/api/common';
import { updateUserEmail } from '@/api/user';

// 入参
const props = defineProps({
  modelValue: Boolean,
  data: Object,
  title: String,
});

const emit = defineEmits(['update:modelValue', 'done', 'cancel']);

const visible = ref(props.modelValue);

const [countDown, handleCounter] = useCounter();
const formRef = ref<FormInstanceFunctions>();
const formData = ref<{
  email?: string;
  code?: string;
}>({});

/**
 * 发送验证码
 */
const sendCode = () => {
  formRef.value.validate({ fields: ['email'] }).then(async (e: any) => {
    if (e === true) {
      // 发送 验证码
      try {
        await commEmail({ email: formData.value?.email, scene: 'email' });
        MessagePlugin.success('验证码已发送');
        handleCounter();
      } catch (err) {
        console.log(err);
        MessagePlugin.error(err.message);
      }
    }
  });
};

const onSubmitConfirm = async () => {
  // 表单验证
  formRef.value?.validate().then(async (e: any) => {
    // 表单校验通过
    if (e === true) {
      try {
        await updateUserEmail(formData.value);
        MessagePlugin.success('设置成功!');
        emit('done');
      } catch (err) {
        MessagePlugin.error(err.message || '设置失败!');
      }
    }
  });
};

const close = () => {
  emit('update:modelValue', false);
};

const cancel = () => {
  emit('update:modelValue', false);
  emit('cancel');
};

// 监听 props.modelValue 的变化，更新 visible
watch(
  () => props.modelValue,
  async (value) => {
    console.log('modelValue.value', value);
    visible.value = value;
  },
);
</script>
